
<script setup lang="ts">
import { computed, ref, nextTick } from "vue";
import { ElMessage } from "element-plus";
import axios from 'axios';
import * as XLSX from 'xlsx';
const props = defineProps<{
  type: string,
  url: string,
  file?: File,
  name?: string,
  fileHost: string,
}>()

// iframe引用
const frame = ref<HTMLIFrameElement>();
const excel_tableau = ref(null); //excel
const src = ref(null) //链接
// if (props.type == 'excel') {
//   axios.get(`${import.meta.env.VITE_APP_API_URL}/${props.url}`, {
//     responseType: 'arraybuffer',
//     headers: {
//       "Content-Type":
//         "application/vnd.ms-excel;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
//     }
//   })
//     .then((res) => {
//       try {
//         let excel_book = XLSX.read(new Uint8Array(res.data), { type: 'array' }); //解析数据
//         let excel_sheet = excel_book.Sheets[excel_book.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
//         excel_tableau.value = XLSX.utils.sheet_to_html(excel_sheet);
//       } catch (error) {
//         ElMessage.warning("请检查excel表格是否为空内容")
//       }
//     })
// } else if (props.type == 'plain') {
//   // 直接将链接嵌套到iframe会显示乱码
//   axios.get(`${import.meta.env.VITE_APP_API_URL}/${props.url}`, {
//     headers: {
//       "Content-Type": "application/json",
//     }
//   }).then(({ data }) => {
//     excel_tableau.value = data;
//   })
// } else {
//   nextTick(() => {
//     src.value = `${import.meta.env.VITE_APP_API_URL}/${props.url}`
//   })
// }

// })
const headers = {
  'Content-Type': '',
};
// const link = `${import.meta.env.VITE_APP_API_URL}/${props.url}`;
const link = 'http://' + props.fileHost + '/' + props.url;
switch (props.type) {
  case 'excel':
    headers['Content-Type'] = 'application/vnd.ms-excel;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    axios.get(link, { responseType: 'arraybuffer', headers })
      .then((res) => {
        try {
          let excel_book = XLSX.read(new Uint8Array(res.data), { type: 'array' }); //解析数据
          let excel_sheet = excel_book.Sheets[excel_book.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
          excel_tableau.value = XLSX.utils.sheet_to_html(excel_sheet);
        } catch (error) {
          ElMessage.warning("请检查excel表格是否为空内容")
        }
      });
    break;
  case 'plain':
    headers['Content-Type'] = 'application/json';
    axios.get(link, { headers })
      .then(({ data }) => {
        excel_tableau.value = data;
      });
    break;
  default:
    nextTick(() => {
      src.value = link
    });
    break;
};

</script>

<template>
  <div class="isiframe">
    <div class="viewer3" v-if="props.type == 'excel' || props.type == 'plain'" v-html="excel_tableau"></div>
    <iframe v-else title="文档预览" ref="frame" :src="src" class="iframe-viewer" reabonly></iframe>

  </div>
</template>

<style lang="scss" scoped>
.viewer3 {
  padding: 20px 20px 10px;
}

.iframe-viewer {
  height: 500px;
  width: 100%;
  border: 0;
}
</style>
